import React from 'react'
import ReactDOM from 'react-dom'

class TodoItem extends React.Component {

  handlerChange() {
    let isDone = !this.props.isDone;
    this.props.changeTodoState(this.props.index, isDone);
  }
  handlerDelete() {
    this.props.deleteTodo(this.props.index)
  }
  handlerMouseIn() {
    ReactDOM.findDOMNode(this.refs.delButton).style.display = 'inline-block'
  }
  handlerMouseOut() {
    ReactDOM.findDOMNode(this.refs.delButton).style.display = 'none'
  }
  render() {
    let className = this.props.isDone ? 'task-done' : ''
    //为删除button添加默认样式
    const styleDeleteSpan = {
      delete:{
        display:'none'
      }
    }
    return (
      <li onMouseOver={this.handlerMouseIn.bind(this)} onMouseOut={this.handlerMouseOut.bind(this)}>
        <input type="checkbox" checked={this.props.isDone} onChange={this.handlerChange.bind(this)} />
        <span className={className + ' task'}>{this.props.text}</span>
        <span style={styleDeleteSpan.delete} ref="delButton" onClick={this.handlerDelete.bind(this)}>删除</span>
      </li>
    )
  }
}

export default TodoItem